/**
 * @Name:  AutoApply
 * @Author: 方知有
 * @Desc:  自适应
 * @Date: 2020-11-16 13:58:26
 */
import React, { Component, Fragment } from "react";
import $ from "jquery";
import { Icon } from "antd";
import styles from "./styles.module.less";

//总导航
const menuList = [
  { id: "mio", name: "秋山澪", icon: "" },
  { id: "ritsu", name: "田井中律", icon: "" },
  { id: "mugi", name: "琴吹紬", icon: "" },
  { id: "yui", name: "平泽唯", icon: "" },
  { id: "azusa", name: "中野梓", icon: "" },
  { id: "nodoka", name: "真锅和", icon: "" },
  { id: "ui", name: "平泽忧", icon: "" },
  { id: "sawako", name: "山中佐和子", icon: "" }
];
const defaultWidth = 320;
const checkList = [
  { code: "A", name: "<p>就卡了法律手就爱是</p>" },
  { code: "B", name: "<p>就卡了法律手段立</p>" },
  { code: "C", name: "<p>就卡了法律手段立</p>" },
  { code: "D", name: "<p>就卡了法律手段立</p>" },
  { code: "E", name: "<p>就卡了法</p>" }
];

class AutoApply extends Component {
  state = {
    baseWidth: 1200, //PC窗口基础宽
    miniWidth: 765, //平板宽
    nowWidth: 0, //当前屏幕宽
    upliwidth: 1200, //最大宽
    upList: [], //前半部分显示
    downList: [], //后半部分隐藏
    menuHide: false, //宽度小于miniWidth，导航收起
    moreShow: false //更多
  };
  componentDidMount() {
    window.addEventListener("resize", this.resize);
    this.resize();
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.resize);
  }
  /**
   * @name resize
   * @description 监听页面窗口缩放
   */
  resize = () => {
    let width = document.documentElement.clientWidth; //窗口当前宽
    let leftWidth = 200; //左侧导航栏
    let moreWidth = 80; //更多按钮
    let needWidth = width - leftWidth - moreWidth;
    let listwidth = 0;
    let upliwidth = 0;
    let spNum = 0;
    //是否为平板端（765）
    if (width <= this.state.miniWidth) {
      this.setState({ menuHide: true });
      return;
    } else {
      this.setState({ menuHide: false, moreShow: false });
    }
    //横向导航所占区域，宽度变化
    for (let i = 0; i < menuList.length; i++) {
      listwidth += $(`#${menuList[i].id}`).width() + 30;
      if (listwidth < needWidth) {
        spNum = i;
      }
    }
    //横向导航应显示最大宽度（为所渲染导航宽之和）
    for (let m = 0; m < spNum + 1; m++) {
      upliwidth += $(`#${menuList[m].id}`).width() + 30;
    }
    let downList = menuList.slice(spNum + 1);
    this.setState({ downList, upliwidth });
  };
  /**
   * @name mouseEnter
   * @description 鼠标移入
   */
  mouseEnter = () => {
    this.setState({ moreShow: !this.state.moreShow });
  };
  testtt = () => {
    this.tag = 0;
    let arr = checkList.reduce((pre, cur) => {
      let textOne = cur.name.replace(/<[^<>]+>/g, "");
      let textTwo = textOne.replace(/&nbsp;/gi, "");
      let widths = (textTwo.length + 1) * 14;
      if (widths > 0.5 * defaultWidth) {
        pre.push(cur);
        return pre;
      } else {
        return pre;
      }
    }, []);

    return checkList.map((v) => (
      <div style={{ display: "inline-block", width: arr.length > 0 ? "100%" : "50%" }} key={v.code}>
        <span style={{ marginRight: "5px" }}>{v.code}.</span>
        <div style={{ display: "inline-block" }} dangerouslySetInnerHTML={{ __html: v.name }} />
      </div>
    ));
  };
  render() {
    const { downList, moreShow, upliwidth, menuHide } = this.state;
    return (
      <div>
        <div className={styles.container}>
          {menuHide ? (
            <div className={styles.menubar}>
              <Icon type="bars" className={styles.menubar_icon} onClick={this.mouseEnter} />
              {moreShow && (
                <div className={styles.menu_bar_list}>
                  {menuList.map((item) => (
                    <li key={item.id} className={styles.menu_bar_li}>
                      {item.name}
                    </li>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <div>
              <div id="menubox" className={styles.menu_box} style={{ maxWidth: upliwidth }}>
                {menuList.map((item) => (
                  <span id={item.id} key={item.id} className={styles.up_list}>
                    {item.name}
                  </span>
                ))}
              </div>
              {downList instanceof Array && downList.length > 0 && (
                <div className={styles.up_list} style={{ position: "relative" }} onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseEnter}>
                  <i className={styles.menu_more_icon}>&#8249;</i>更多
                  {moreShow && (
                    <div className={styles.menu_more_list}>
                      {downList.map((item) => (
                        <li key={item.id} className={styles.menu_more_li}>
                          {item.name}
                        </li>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>
        <div style={{ width: defaultWidth, background: "#ccc" }}>{this.testtt()}</div>
      </div>
    );
  }
}
export default AutoApply;
